<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.io.InputStream" %>
<%@ page import="java.io.IOException" %>
<%@ page import="java.util.Properties" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PageContext对象操作题 - 资源图片展示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .instructions {
            background-color: #e9f7fe;
            border-left: 4px solid #2196F3;
            padding: 15px;
            margin: 20px 0;
        }
        .operation-steps {
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 15px;
            margin: 20px 0;
        }
        .code-block {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 15px;
            font-family: monospace;
            white-space: pre-wrap;
            overflow-x: auto;
        }
        .result-area {
            margin-top: 30px;
            padding: 20px;
            border: 1px dashed #ccc;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #0056b3;
        }
        img {
            max-width: 100%;
            height: auto;
            margin-top: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>PageContext 对象操作题</h1>

    <div class="instructions">
        <h2>题目要求</h2>
        <p>使用 JSP 内置对象 pageContext 实现从 resources 目录中获取指定图片并在页面中展示。</p>
    </div>

    <div class="operation-steps">
        <h2>操作步骤</h2>
        <ol>
            <li>使用 pageContext 对象获取 ServletContext 对象</li>
            <li>通过 ServletContext 获取 resources 目录中图片的输入流</li>
            <li>将图片以合适的方式在页面中展示</li>
        </ol>
    </div>

    <div class="code-block">
        // 关键代码示例：<br>
        // 1. 获取 ServletContext 对象<br>
        ServletContext application = pageContext.getServletContext();<br><br>

        // 2. 获取资源文件输入流<br>
        InputStream is = application.getResourceAsStream("/WEB-INF/classes/img/图片名称");<br><br>

        // 3. 处理并展示图片<br>
        // ... 图片处理逻辑 ...
    </div>

    <div class="result-area">
        <h2>运行结果</h2>
        <%
            // 使用 pageContext 获取 ServletContext 对象
            ServletContext  applications = pageContext.getServletContext();

            // 指定要获取的图片名称（这里以常见的图片名称为例）
            String imageName = "1.jpg"; // 实际使用时应根据你的resources目录内容调整

            // 通过 ServletContext 获取资源文件输入流
            InputStream imageStream = applications.getResourceAsStream("/WEB-INF/classes/img/" + imageName);

            if (imageStream != null) {
                out.println("<p>成功通过 pageContext 对象获取到图片资源：" + imageName + "</p>");
                out.println("<p>图片路径：/WEB-INF/classes/img/" + imageName + "</p>");
                out.println("<img src='/WEB-INF/classes/img/" + imageName + "' alt='图片'>");
                out.println("<div style='color: green; font-weight: bold;'>操作成功！已通过 pageContext 对象获取到资源目录中的图片。</div>");
            } else {
                out.println("<p>未找到图片：" + imageName + "</p>");
                out.println("<div style='color: orange; font-weight: bold;'>提示：请确保在 src/main/resources/img 目录中有名为 sample.jpg 的图片文件，或修改代码指定正确的图片名称。</div>");
            }
        %>

        <h3>操作题解析</h3>
        <p>在这个操作题中，我们使用了 pageContext 对象的 getServletContext() 方法获取了 ServletContext 对象，
            然后使用该对象的 getResourceAsStream() 方法从项目的 resources 目录中获取图片资源。</p>

        <p>resources 目录中的文件在项目编译后会被放置在 classpath 下（通常是 WEB-INF/classes 目录中），
            因此我们需要使用 "/WEB-INF/classes/img/图片名称" 这样的路径来访问它们。</p>
    </div>

    <div style="text-align: center; margin-top: 30px;">
        <button onclick="location.reload()">重新执行操作</button>
    </div>
   // ... existing code ...
<%@ page import="java.util.Base64" %>
<%@ page import="java.io.InputStream" %>
// ... existing code ...
<%
    // 使用pageContext获取servletContext
    ServletContext context = pageContext.getServletContext();
    // 读取resources中的图片
    InputStream inputStream = context.getResourceAsStream("/WEB-INF/classes/img/1.jpg");
    String imageBase64 = "";
    if (inputStream != null) {
        try {
            byte[] bytes = inputStream.readAllBytes();
            imageBase64 = Base64.getEncoder().encodeToString(bytes);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (inputStream != null) inputStream.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
%>
<img src="data:image/jpeg;base64,<%= imageBase64 %>" alt="图片">
// ... existing code ...

</div>
</body>
</html>
